<template>
<view :class="'cu-modal bottom-modal ' + (modalSku ? 'show' : '')" @tap="hideModalSku" catchtouchmove="touchMove">
  <view :class="'cu-dialog dialo-sku bg-white ' + (modalSku ? 'animation-slide-bottom' : '')" @tap.stop>
    <view class="cu-card article no-card" style="height: 30%">
      <view class="cu-item">
        <view class="content">
          <image :src="goodsSpu.picUrls[0] ? goodsSpu.picUrls[0] : '/public/img/no_pic.png'" mode="aspectFill" class="row-img margin-top-xs" v-if="goodsSku == ''"></image>
          <image :src="goodsSku.picUrl ? goodsSku.picUrl : goodsSpu.picUrls[0] ? goodsSpu.picUrls[0] : '/public/img/no_pic.png'" mode="aspectFill" class="row-img margin-top-xs" v-if="goodsSku != ''"></image>
          <view class="desc">
            <view class="text-price margin-top-xl text-bold text-red text-xl" v-if="goodsSku == ''">{{goodsSpu.priceDown}}<text v-if="goodsSpu.priceDown != goodsSpu.priceUp" class="text-red margin-lr-xs">-</text><text v-if="goodsSpu.priceDown != goodsSpu.priceUp" class="text-red text-bold">{{goodsSpu.priceUp}}</text>
            </view>
            <view class="text-price margin-top-xl text-bold text-red text-xl" v-if="goodsSku != ''">{{goodsSku.salesPrice}}</view>
            <view class="text-gray text-sm" v-if="goodsSku.stock != null">库存{{goodsSku.stock}}件</view>
            <view class="text-black text-sm" v-if="goodsSpecData.length > 0">选择
              <view v-for="(item, index) in goodsSpecData" :key="index" class="display-ib">
                <view class="display-ib" v-if="!item.checked">{{item.value}}</view>
                <view v-for="(item2, index2) in item.leaf" :key="index2" class="display-ib" v-if="item.checked">
                  <view class="display-ib" v-if="item.checked == item2.id">{{item2.value}}</view>
                </view>
                <view class="display-ib" v-if="goodsSpecData.length != (index+1)">,</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="text-xl close-icon">
        <text class="cuIcon-close" @tap="hideModalSku"></text>
      </view>
    </view>
    <scroll-view scroll-y scroll-with-animation style="height:60%">
      <view v-for="(item, index) in goodsSpecData" :key="index" class="padding-bottom-xs solid-top">
        <view class="cu-bar bg-white" style="min-height: 80rpx">
          <view class="action">
            <text class="text-black">{{item.value}}</text>
          </view>
        </view>
        <view class="grid bg-white margin-lr-sm">
          <button v-for="(item2, index2) in item.leaf" :key="index2" :class="'cu-btn margin-xs ' + (item.checked == item2.id ? 'line-red' : '')" @tap="tapSpec" :data-index="index" :data-index2="index2" :disabled="item2.disabled">{{item2.value}}</button>
        </view>
      </view>
      <view class="cu-bar bg-white solid-top">
          <view class="action">
            <text class="text-black">数量</text>
          </view>
          <base-stepper customClass="margin-right" :stNum="cartNum" min="1" :max="goodsSku.stock" @numChange="cartNumChang"></base-stepper>
        </view>
    </scroll-view>
    <view class="cu-bar bg-white tabbar border shop foot" style="height: 10%">
      <view class="btn-group" v-if="modalSkuType == ''">
        <button class="cu-btn bg-orange round shadow-blur m-sku-bn lg" @tap="toDo" data-type="1" :disabled="goodsSku.enable == '0'" type>加入购物车</button>
        <button class="cu-btn bg-red round shadow-blur m-sku-bn lg" @tap="toDo" data-type="2" :disabled="goodsSku.stock <= 0 || goodsSku.enable == '0'" type>立即购买</button>
      </view>
      <view class="btn-group" v-if="modalSkuType != ''">
        <button class="cu-btn bg-red round shadow-blur lg" style="width: 90%" @tap="toDo" :disabled="(modalSkuType == '2' && goodsSku.stock <= 0) || goodsSku.enable == '0'" type :data-type="modalSkuType">确定</button>
      </view>
    </view>
  </view>
</view>
</template>

<script>
const app = getApp();
import baseStepper from "../base-stepper/index";

export default {
  data() {
    return {};
  },

  components: {
    baseStepper
  },
  props: {
    goodsSpu: {
      type: Object,
      default: []
    },
    goodsSpecData: {
      type: Object,
      default: []
    },
    goodsSku: {
      type: Object,
      default: []
    },
    modalSku: {
      type: Boolean,
      default: false
    },
    modalSkuType: {
      type: String,
      default: ''
    },
    cartNum: {
      type: Number,
      default: 1
    },
    shoppingCartId: {
      type: String,
      default: null
    },
    //折扣类型
    discountType: {
      type: String,
      default: ''
    },
    //优惠金额
    discountPrice: {
      type: String,
      default: ''
    },
    //活动id
    limitimeId: {
      type: String,
      default: ''
    }
  },
  methods: {
    test() {},

    touchMove() {
      return;
    },

    hideModalSku() {
      this.setData({
        modalSku: false
      });
    },

    cartNumChang(e) {
      console.log(e);
      this.setData({
        cartNum: e.detail
      });
    },

    //选择规格
    tapSpec(e) {
      let index = e.currentTarget.dataset.index;
      let index2 = e.currentTarget.dataset.index2;
      let goodsSpecData = this.goodsSpecData;
      let spec = goodsSpecData[index].leaf[index2];
      goodsSpecData[index].checked = spec.id;
      this.setData({
        goodsSpecData: goodsSpecData
      });
      let that = this;
      let skus = this.goodsSpu.skus;
      skus.forEach(function (sku) {
        let i = 0;
        sku.specs.forEach(function (spec2) {
          goodsSpecData.forEach(function (spec) {
            if (spec.id == spec2.specId && spec.checked == spec2.specValueId) {
              i = i + 1;
            }
          });
        });

        if (i == goodsSpecData.length) {
          that.setData({
            goodsSku: sku
          });
          let detail = {
            goodsSpecData: goodsSpecData
          };
          that.$emit('changeSpec', {
            detail: detail
          });
        }
      });
    },

    //提交
    toDo(e) {
      let canDo = true;

      try {
        this.goodsSpecData.forEach(function (spec) {
          if (!spec.checked) {
            canDo = false;
            uni.showToast({
              title: '请选择' + spec.value,
              icon: 'none',
              duration: 2000
            });
            throw new Error();
          }
        });
      } catch (e) {}

      if (canDo) {
        let goodsSku = this.goodsSku;
        let goodsSpu = this.goodsSpu;
        let specInfo = '';
        let goodsSpecData = this.goodsSpecData;
        goodsSpecData.forEach(function (spec, index) {
          spec.leaf.forEach(function (specItem) {
            if (spec.checked == specItem.id) {
              specInfo = specInfo + specItem.value;

              if (goodsSpecData.length != index + 1) {
                specInfo = specInfo + ';';
              }
            }
          });
        });

        if (e.currentTarget.dataset.type == '1') {
          //加购物车
          if (this.shoppingCartId) {
            app.globalData.api.shoppingCartEdit({
              id: this.shoppingCartId,
              spuId: goodsSpu.id,
              skuId: goodsSku.id,
              quantity: this.cartNum,
              addPrice: goodsSku.salesPrice,
              spuName: goodsSpu.name,
              specInfo: specInfo,
              picUrl: goodsSku.picUrl ? goodsSku.picUrl : goodsSpu.picUrls[0]
            }).then(res => {
              uni.showToast({
                title: '修改成功',
                duration: 5000
              });
              this.setData({
                modalSku: false
              });
              this.$emit('operateCartEvent');
            });
          } else {
            app.globalData.api.shoppingCartAdd({
              spuId: goodsSpu.id,
              skuId: goodsSku.id,
              quantity: this.cartNum,
              addPrice: goodsSku.salesPrice,
              spuName: goodsSpu.name,
              specInfo: specInfo,
              limitimeId: this.limitimeId,
              picUrl: goodsSku.picUrl ? goodsSku.picUrl : goodsSpu.picUrls[0]
            }).then(res => {
              uni.showToast({
                title: '添加成功',
                duration: 5000
              });
              this.setData({
                modalSku: false
              });
              this.$emit('operateCartEvent');
            });
          }
        } else {
          //立即购买，前去确认订单

          /* 把参数信息异步存储到缓存当中 */
          console.log('确认购买的商品参数-------------------', goodsSpu);
          uni.setStorage({
            key: 'param-orderConfirm',
            data: [{
              spuId: goodsSpu.id,
              skuId: goodsSku.id,
              quantity: this.cartNum,
              salesPrice: goodsSku.salesPrice,
              spuName: goodsSpu.name,
              specInfo: specInfo,
              picUrl: goodsSku.picUrl ? goodsSku.picUrl : goodsSpu.picUrls[0],
              pointsDeductSwitch: goodsSpu.pointsDeductSwitch,
              pointsDeductScale: goodsSpu.pointsDeductScale,
              pointsDeductAmount: goodsSpu.pointsDeductAmount,
              pointsGiveSwitch: goodsSpu.pointsGiveSwitch,
              pointsGiveNum: goodsSpu.pointsGiveNum,
              freightTemplat: goodsSpu.freightTemplat,
              weight: goodsSku.weight,
              volume: goodsSku.volume,
              strategy: goodsSpu.strategy,
              specialDTO: goodsSpu.specialDTO,
              discountType: this.discountType || '',
              discountPrice: this.discountPrice || '',
              fixedPrice: this.fixedPrice || ''
            }]
          });
          uni.navigateTo({
            url: '/pages/order/order-confirm/index'
          });
        }
      }
    }

  }
};
</script>
<style>
@import "./index.css";
</style>